<template>
  <div>
    <h1>编程式导航</h1>
    <button type="button" @click="test01()">1:用replace方法以url地址作为参数</button>
    <button type="button" @click="test02()">2:用replace方法以name名称作为参数</button>
    <button type="button" @click="test03()">3:用push方法以url地址作为参数</button>
    <button type="button" @click="test04()">4:用push方法以name名称作为参数</button>

   <h1>声明式导航</h1>
   <router-link :to="{'name':'testIndex'}">1:页面跳转不传值</router-link>
   <router-link :to="{'name':'testIndex',query:{'name':userName}}">2:页面跳转并传值</router-link>
  </div>
</template>

<script>
  export default {
    name: "testLogin",
    data() {
      return {
        userName: "rock"
      }
    },
    methods: {
      /*replace:不可以回退
        push:可以回退
       */
      test01() {
        this.$router.replace("/testIndex");
      },
      test02() {
        this.$router.replace({
          "name": "testIndex",
          "query": {
            "name": this.userName,
            "pwd": "111"
          }
        });
      },
      test03() {
        this.$router.push("/testIndex");
      },
      test04() {
        this.$router.push({
          "name": "testIndex",
          query: {
            "name": this.userName
          }
        });
      },

    }

  }
</script>

<style>
</style>
